﻿<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<style type="text/css">
body,div,ul,li{
 margin:0 auto;
 padding:0;
}

/*第一种形式*/
#tabs0 {
 height: auto;
 width: 300px;
 border: 1px solid #cbcbcb;
 background-color: #f2f6fb;
}
.menu0{
 width:3400px;
}
.menu0 li{
 display:block;
 float: left;
 text-align:center;
 padding: 4px 0;
 width:100px;
 
 cursor:pointer;
 background: #FFFFff;
}
.menu0 li.hover{
 background: #f2f6fb;
}
#main0 ul{
 display: none;
}
#main0 ul.block{
 display: block;
 text-align:left;
}
#main0 ul.block.li{
 display: block;
 text-align:left;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.9&ak=FEf57a4866b7c8bbc8ad003e237f4110"></script>
<div id="container"></div>

<script type="text/javascript">

    // 百度地图API功能
    var sContent = '<div id="tabs0">' +
     '<ul class="menu0" id="menu0">' +
      '<li onclick="setTab(0,0)" class="hover">基本信息</li>' +
      '<li onclick="setTab(0,1)">司机信息</li>' +
      '<li onclick="setTab(0,2)">任务信息</li>' +
 '</ul>' +
 '<div class="main" id="main0">' +
  '<ul class="block">' +
  '<li><p>车牌号码：京CL0421</p></li>' +
  '<li><p>定位时间：2013-11-29 13:29:15</p></li>' +
  '<li><p>行驶速度：60公里/小时</p></li>' +
  '<li><p>行驶方向：正北</p></li>' +
  '<li><p>位置坐标：</p></li>' +
  '<li><p>位置描述：当前路段</p></li>' +
  '<li><p>车辆状态：程序打开，主电源供电</p></li>' +
  '<li><p>行驶里程：30/km</p></li>' +
  '<li><p>车牌号码：京CL0421</p></li>' +
  '<li><p>温度信息：温度1:10.5</p></li>' +
  '<li><p>定位状态：有效</p></li></ul>' +
  '<ul><li>司机信息</li></ul>' +
  '<ul><li>任务信息</li></ul>' +
 '</div>' +
'</div>'
    function setTab(m, n) {
        var tli = document.getElementById("menu" + m).getElementsByTagName("li");
        var mli = document.getElementById("main" + m).getElementsByTagName("ul");
        for (i = 0; i < tli.length; i++) {
            tli[i].className = i == n ? "hover" : "";
            mli[i].style.display = i == n ? "block" : "none";
        }
    }      
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
//var myobj = window.MYOBJ;
//for (var i = 0; i < myobj.length; i++) {
//    alert(myobj[i].LONGITUDE);
//    alert(myobj[i].LATITUDE);
//}
var myP1 = new BMap.Point(116.30353546142578, 39.97383499145508);    //起点-重庆
var myP2 = new BMap.Point(116.372442, 39.91819); //(window.LONGITUDE, window.LATITUDE);    //终点-西安
var myP3 = new BMap.Point(116.465605, 39.915617);    //终点-西安
//var myP4 = new BMap.Point(116.465605,39.915617);    //终点-北京
var marker = new BMap.Marker(myP2);
var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
//map.centerAndZoom(point, 15);
map.addOverlay(marker);
marker.addEventListener("click", function () {
    this.openInfoWindow(infoWindow);
    //图片加载完毕重绘infowindow
    document.getElementById('imgDemo').onload = function () {
        infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
    }
});

//    map.clearOverlays();                        //清除地图上所有的覆盖物
    var driving = new BMap.DrivingRoute(map);    //创建驾车实例
    driving.search(myP1, myP2);                 //第一个驾车搜索
    driving.search(myP2, myP3);                 //第二个驾车搜索
    //driving.search(myP2, myP4);                 //第二个驾车搜索
    driving.setSearchCompleteCallback(function(){
        var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组

        var polyline = new BMap.Polyline(pts);     
        map.addOverlay(polyline);
        
        var m1 = new BMap.Marker(myP1);         //创建3个marker
        var m2 = new BMap.Marker(myP2);
        var m3 = new BMap.Marker(myP3);
       // var m4 = new BMap.Marker(myP4);
        map.addOverlay(m1);
//        map.addOverlay(m2);
        map.addOverlay(m3);
       // map.addOverlay(m4);
        var lab1 = new BMap.Label("起点",{position:myP1});        //创建3个label
        var lab2 = new BMap.Label(window.INTIME, { position: myP2 });
        var lab3 = new BMap.Label("终点", { position: myP3 });
        //var lab4 = new BMap.Label("终点",{position:myP4});   
        map.addOverlay(lab1);
        map.addOverlay(lab2);
        map.addOverlay(lab3);
        //map.addOverlay(lab4);
        setTimeout(function(){
            map.setViewport([myP1, myP2, myP3]);          //调整到最佳视野
        },200);
        
    });
   
</script>
